<template>
  <div class="">
    <p>父组件</p>
    <p>count is {{ count }}</p>
    <p>message is {{ message }}</p>
    <hr />
    <!-- 全写 -->
    <!-- <child
      :modelValue="count"
      @update:modelValue="count = $event"
      :message="message"
      @update:message="message = $event"
    /> -->
    <!-- 语法糖写法 -->
    <child v-model="count" v-model:message="message" />
  </div>
</template>

<script lang="ts" setup name="Parent">
import { ref } from 'vue'
import child from './child.vue'
const count = ref(0)
const message = ref('abc')
</script>

<style scoped></style>
